<template>
	<view class="page-item">
		<view class="pen-box">
			<view class="arrow-left-item" @click="handleRetuen">
				<uv-icon name="arrow-left" size="22px" color="#fff"></uv-icon>
			</view>
			<view class="pen-text">访客邀请码</view>
			<view class=""></view>
		</view>

		<view class="content">
			<view class="head-box">
				<view class="result-head">
					<view class="head-img">
						<image src="/static/icon/icon-8.png" mode=""></image>
					</view>
					<view class="head-title">
						距离预约还有
						<span class="num-circle">{{distanceDay}}</span>
						天，期待您的到来
					</view>
				</view>

			</view>
			<view class="user-info">
				<view class="info-head">
					<view class="head-Welcome">欢迎到访</view>
					<view class="head-company">中船重工(重庆)西南装备研究院有限公司!</view>
				</view>
				<view class="invitation-code">
					<view class="code-box">
						<view class="code-img">
							<image :src="infoList.qrCodeFilePath" mode=""></image>
						</view>
					</view>
					<view class="">
						<view class="code-tips">该二维码仅访问时间段内有效</view>
						<!-- 	<view class="code-failure">如果失效，请<span class="refresh">刷新</span></view> -->
					</view>
				</view>
			</view>

			<view class="user-info">
				<view class="Visited-box">
					<view class="">被访人姓名:</view>
					<view class="">{{infoList.intervieweeName}}</view>
				</view>
				<view class="Visited-box">
					<view class="">来访时间:</view>
					<view class="">{{infoList.visitorBeginDate}}</view>
				</view>
				<view class="Visited-box">
					<view class="">结束时间:</view>
					<view class="">{{infoList.visitorEndDate}}</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		$get,
		$post
	} from "@/utils/request.js"




	onMounted(() => {
		// 获取当前页面参数
		const currentPage = getCurrentPages().at(-1);
		const {
			id
		} = currentPage.options;
			getInfo(id)
	});

	// 查询详情
	const infoList = ref(null)
	const distanceDay = ref(0)
	const getInfo = (id) => {
		$get('/system/visitorInfo/getInfo', {
			id: id
		}).then(res => {
			infoList.value = res.data

			const beginDate = new Date(res.data.visitorBeginDate);
			const currentDate = new Date();

			// 计算时间差（毫秒）
			const timeDiff = beginDate - currentDate;

			// 如果时间已过，直接设为0
			if (timeDiff <= 0) {
				distanceDay.value = 0;
			} else {
				// 转换为天数（除以一天的毫秒数）
				const days = timeDiff / (1000 * 60 * 60 * 24);
				// 取整数部分，小于1天则为0
				distanceDay.value = Math.floor(days);
			}


		})

	}


	// 返回上一页
	const handleRetuen = () => {
		uni.navigateBack({
			delta: 1
		})
	}
</script>

<style lang="scss">
	// .page-item {
	// 	width: 100vw;
	// 	min-height: 100vh;
	// 	background-color: #5979FF;
	// }
	.page-item {
		width: 100vw;
		min-height: 100vh;
		background-image: linear-gradient(to bottom, #5078FE 50%, #eff4fb);
		background-size: 100% 400px;
		background-repeat: no-repeat;
		background-color: #eff4fb;
	}


	.pen-box {
		width: 100%;
		height: 100px;
		padding: 0 10px;
		padding-top: 30px;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.pen-text {
			font-size: var(--font-16);
			color: var(--color-ff);
			font-weight: 600;

		}


	}

	.content {
		width: 100vw;
		height: auto;
		padding: 20px 20px;
		box-sizing: border-box;

		.head-box {
			.result-head {
				display: flex;
				align-items: center;
				gap: 10px;

				.head-img {
					width: 24px;
					height: 24px;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.head-title {
					color: var(--color-ff);
					font-weight: 800;
					font-size: var(--font-18);
				}

				/* 数字圆圈样式 */
				.num-circle {
					border: 1px solid #fff;
					border-radius: 50%;
					display: inline-flex;
					align-items: center;
					justify-content: center;
					width: 24px;
					height: 24px;
					color: #fff;
					font-size: var(--font-18);
				}
			}

			.head-tips {
				color: #FEFBF2;
				font-size: var(--font-16);
				padding-left: 42px;
				padding-top: 10px;
				box-sizing: border-box;
			}
		}

		.user-info {
			width: 100%;
			height: auto;
			background-color: #fff;
			border-radius: 10px;
			margin: 20px 0px;
			padding: 20px;
			box-sizing: border-box;

			.info-head {

				.head-Welcome {
					color: var(--color-333);
					font-size: var(--font-18);
					font-weight: 600;
				}

				.head-company {
					color: var(--color-333);
					font-size: var(--font-16);
					margin: 6px 0px;

				}


			}

			.invitation-code {
				width: 100%;
				display: flex;
				gap: 8px;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				padding: 30px 0px;
				box-sizing: border-box;

				.code-box {
					width: 216px;
					height: 216px;
					display: flex;
					justify-content: center;
					align-items: center;
					border: 1px solid #B4CAEB;
					border-radius: 4px;

					.code-img {
						width: 200px;
						height: 200px;

						image {
							width: 100%;
							height: 100%;

						}
					}
				}

				.code-tips {
					color: var(--color-333);
					font-size: var(--font-16);

				}

				.code-failure {
					width: 100%;
					text-align: center;
					padding: 4px 0px;
					box-sizing: border-box;
					color: var(--color-333);
					font-size: var(--font-16);

					.refresh {
						color: #407DE3;
						font-weight: 800;
					}
				}


			}




			.Visited-box {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 8px 0px;
				color: var(--color-333);
				font-size: var(--font-16);
			}

		}


	}
</style>